<template>
	<view class="body">
		<view class="head">
			<!-- <view class="h_top">
				<image
					src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u844.png"
					mode=""></image>
				<text>余额</text>
			</view> -->
			<view class="h_bottom">
				<text class="checked">充值</text>
				<text @click="chance" class="check">充值记录</text>
			</view>
		</view>

		<view class="recharge">
			<view class="money">
				<text>
					¥
					<text>{{balance}}</text>
				</text>
				<text>账户余额</text>
			</view>
			<view class="title">
				请选择充值金额
			</view>

			<view class="bc_list">
				<view @click="check(0)" :id="b==0?'change_rech':''">
					<view class="item_l">
						<text>充值500元</text>
						<text>送50元</text>
					</view>
					<view class="item_r">
						<image :src="src[0]" mode=""></image>
					</view>
				</view>
				<view @click="check(1)" :id="b==1?'change_rech':''">
					<view class="item_l">
						<text>充值1000元</text>
						<text>送100元</text>
					</view>
					<view class="item_r">
						<image :src="src[1]" mode=""></image>
					</view>
				</view>
				<view @click="check(2)" :id="b==2?'change_rech':''">
					<view class="item_l">
						<text>充值2000元</text>
						<text>送300元</text>
					</view>
					<view class="item_r">
						<image :src="src[2]" mode=""></image>
					</view>
				</view>
				<view @click="check(3)" :id="b==3?'change_rech':''">
					<view class="item_l">
						<text>充值3000元</text>
						<text>送400元</text>
					</view>
					<view class="item_r">
						<image :src="src[3]" mode=""></image>
					</view>
				</view>
			</view>

			<view class="notice">
				<view class="t1">
					<image src="https://cdn3.axureshop.com/demo/2116044/images/%E4%BD%99%E9%A2%9D/u4007.png" mode="">
					</image>
					<text>充值须知</text>
				</view>
				<view>
					<view>1.您本次充值的预付卡余额有效期为3年，请在有效期内消费。</view>
					<view>2.本卡不记名、不挂失、不兑换，仅限本人使用。</view>
					<view>3.充值后概不退款，如有疑问，可联系商家。</view>
				</view>
			</view>

			<view class="agree">
				<image @click="get" :src="src1"></image>
				<view>
					我已阅读并同意
					<text>充值协议</text>
				</view>
			</view>
			<view class="confirm" @click="rechange">
				<text>确认充值</text>
			</view>
		</view>
	</view>
</template>

<script>
	import http from "@/utils/http.js";
	export default {
		data() {
			return {
				b: 0,
				src: ['https://cdn3.axureshop.com/demo/2116044/images/%E4%BD%99%E9%A2%9D/u3984_selected.png',
					'https://cdn3.axureshop.com/demo/2116044/images/%E4%BD%99%E9%A2%9D/u3984.png',
					'https://cdn3.axureshop.com/demo/2116044/images/%E4%BD%99%E9%A2%9D/u3984.png',
					'https://cdn3.axureshop.com/demo/2116044/images/%E4%BD%99%E9%A2%9D/u3984.png'
				],
				src1: 'https://cdn3.axureshop.com/demo/2116044/images/%E4%BD%99%E9%A2%9D/u3984.png',
				c: 0,
				content_list: [
					'充值500元 赠送50元',
					'充值1000元 赠送100元',
					'充值2000元 赠送300元',
					'充值3000元 赠送400元',
				],
				content: '充值500元 赠送50元',
				send_list: [
					500,
					1000,
					2000,
					3000,
				],
				send: 500,
				give: 50,
				balance: 20,
				userid: '',
			}
		},
		methods: {
			chance() {
				uni.navigateTo({
					url: '/pages/rechargeRecords/rechargeRecords'
				})
			},
			check(i) {
				this.b = i;
				for (let i = 0; i < this.src.length; i++) {
					this.src[i] = 'https://cdn3.axureshop.com/demo/2116044/images/%E4%BD%99%E9%A2%9D/u3984.png'
				};
				this.src[i] = 'https://cdn3.axureshop.com/demo/2116044/images/%E4%BD%99%E9%A2%9D/u3984_selected.png';
				this.content = this.content_list[i],
					this.send = this.send_list[i]

			},
			get() {
				this.src1 = 'https://cdn3.axureshop.com/demo/2116044/images/%E4%BD%99%E9%A2%9D/u3984_selected.png';
				this.c = 1
			},
			getTime: function() {
				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				return timer;
			},
			rechange() {
				const newBalance = this.balance + this.send + this.give;
				// console.log(balance);
				if (this.c == 1) {
					http({
						url: '/recharge',
						method: 'POST',
						data: {
							content: this.content,
							status: '充值成功',
							time: this.getTime(),
							// userid:this.userid,
							userid: 1,
							balance: newBalance
						},
						success(res) {
							console.log(res);
						}
					});
					uni.navigateTo({
						url: '/pages/rechargeSuccess/rechargeSuccess?sum=' + this.send
					})
				}
			}
		},
		onLoad: function(option) {
			console.log(option.balance);
			this.balance = option.balance;
		},
		onUnload() {
			uni.navigateTo({
				url: '/pages/home/home' //返回到我的页面
			})
		},
		onShow() {
			this.userid = uni.getStorageSync("userid") //接收当前用户号码
		}
	}
</script>

<style>
	.body {
		background: #eee;
	}

	.head {
		/* display: flex;
		justify-content: space-around; */
		width: 750rpx;
		top: 0;
		position: sticky;
		background: white;
		/* padding-top: 50rpx; */
	}

	/* .h_top {
		width: 690rpx;
		padding: 25rpx 50rpx 25rpx 30rpx;
	}

	.h_top image {
		display: inline-block;
		width: 20rpx;
		height: 32rpx;
	}

	.h_top text {
		width: 650;
		display: inline-block;
		text-align: center;
	}
 */
	.h_bottom {
		display: flex;
		justify-content: space-around;
	}

	.checked {
		border-bottom: 2px solid rgba(247, 114, 20, 1);
		color: #F77214;
	}

	.check {
		padding-bottom: 20rpx;
		color: #999;
	}

	.recharge {
		overflow: auto;
		height: 83vh;
	}

	.recharge .money {
		width: 700rpx;
		height: 200rpx;
		margin: 0 auto;
		margin-top: 25rpx;
		background: white;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		border-radius: 8px;
	}

	.money>text:nth-child(1) text {
		font-size: 56rpx;
		font-weight: bold;
		display: inline-block;
	}

	.money text:nth-child(2) {
		font-size: 35rpx;
		color: #999999;
	}

	.title {
		margin: 30rpx 0 30rpx 25rpx;
		color: #333;
		font-size: 35rpx;
	}

	.bc_list {
		display: flex;
		flex-wrap: wrap;
	}

	#change_rech {
		border: 1px solid rgba(247, 114, 20, 1);
		background-color: rgba(247, 114, 20, 0.0784313725490196);
	}

	.bc_list>view {
		padding: 30rpx 30rpx 30rpx 25rpx;
		width: 285rpx;
		height: 100rpx;
		margin-bottom: 25rpx;
		margin-left: 25rpx;
		background: white;
		border-radius: 8px;
		display: flex;
		justify-content: space-between;
	}

	.item_l {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.item_l text:nth-child(1) {
		color: #F77214;
	}

	.item_l text:nth-child(2) {
		font-size: 25rpx
	}

	.bc_list image {
		width: 32rpx;
		height: 32rpx;
	}

	.notice {
		margin: 25rpx 25rpx 0 25rpx;
	}

	.notice image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}

	.t1 {
		margin-bottom: 50rpx;
	}

	.t1 text {
		font-size: 30rpx;
		color: #999;
	}

	.notice>view>view {
		font-size: 30rpx;
		color: #999;
	}

	.agree {
		margin: 30rpx 0 20rpx 25rpx;
	}

	.agree view text {
		color: #F77214;
	}

	.agree view {
		display: inline-block;
		font-size: 30rpx;
		color: #333;
	}

	.agree image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
		vertical-align: middle;
	}

	.confirm {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 130rpx;
		background: white;
	}

	.confirm text {
		display: block;
		width: 700rpx;
		height: 90rpx;
		margin: 0 25rpx 0 25rpx;
		text-align: center;
		line-height: 90rpx;
		background: rgba(247, 114, 20, 1);
		color: #fff;
		border-radius: 45rpx;
	}

	/* 充值记录 */
	/* .rc_list {
		width: 690rpx;
		height: 100rpx;
		padding: 30rpx;
		background: white;
		border-top: 1px solid rgba(242, 242, 242, 1);
		display: flex;
		justify-content: space-between;
	}

	.rc_list .rc_list_l {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.rc_list .rc_list_l view:nth-child(1) {
		font-size: 35rpx;
	}

	.rc_list .rc_list_l view:nth-child(2) {
		font-size: 30rpx;
		color: #999;
	}

	.rc_list_r {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.rc_list_r view:nth-child(1) {
		font-size: 30rpx;
		color: #333;
	}

	.rc_list_r view:nth-child(2) {
		font-size: 30rpx;
		color: #ccc;
	} */
</style>
